<template>
  <view class="list-box">
    <view class="head space-between center">
      <view class="left center">
        <text class="name">{{props.name}}</text>
        <text class="word" v-if="props.word">{{props.word}}</text>
      </view>
      <view class="right">
        <text class="title">全部</text>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
   
    <!--  -->
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
  import courseItem from '@/components/common/course-item.vue'
   const props = defineProps({
        name: {
          type: String,
          default: '热门推荐'
        },
        word: {
          type: String,
          default: null
        },
       })
      
</script>

<style lang="scss" scoped>
  .list-box {
    margin-top: 40rpx;

    .left {
      .name {
        font-size: 38rpx;
        font-weight: 500;
        color: #303133;
        margin-right: 10rpx;
      }

      .word {
        font-size: 20rpx;
        background-image: linear-gradient(to right, $mxg-color-orange, $mxg-text-color-red);
        padding: 0 10rpx;
        border-radius: 30rpx 30rpx 30rpx 0;
      }
    }

    .right {
      font-weight: normal;
      color: #a4a5a9;

      .iconfont {
        font-size: 25rpx;
      }
    }

  }
</style>
